<script setup>
import {
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom, Plus
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import {ref} from "vue";
import {useTokenStore} from '@/store/token.js'
const tokenStore = useTokenStore()
//条目被点击后,调用的函数
import {useRouter} from 'vue-router'
const router = useRouter();
import userApi from "@/api/user.js";
import {useUserInfoStore} from '@/store/userInfo.js'
import {ElMessage} from "element-plus";
const userInfoStore = useUserInfoStore()


const getUserInfo = () => {
  userApi.userInfo().then(result => {
    if (result.code == 0) {
      //数据存储到pinia中
      userInfoStore.setUserInfo(result.data.user)
      menuData.value = result.data.routers
    }
  })
}
getUserInfo()

// 菜单  用户管理， 分类管理， 商品管理
const menuData = ref([
  {
    name: '权限管理', icon: 'GobletFull', children: [
      {name: '管理员管理', icon: 'GobletSquareFull', path: "user"},
      {name: '角色管理', icon: 'TrendCharts', path: "role"},
      {name: '权限管理', icon: 'TrendCharts', path: "permission"},
    ]
  }

]);

//重置密码
const userPasswordDTO = ref({
  oldPassword: '',
  newPassword: ''
})
const dialogResetPasswordDialog = ref(false)
const resetForm = ref()

//自定义确认密码的校验函数
const rePasswordValid = (rule, value, callback) => {
  if (value == null || value === '') {
    return callback(new Error('请再次确认密码'))
  }
  //响应式对象要：registerData.value才能拿到值
  if (userPasswordDTO.value.newPassword !== value) {
    return callback(new Error('两次输入密码不一致'))
  }

  callback()
}

const rules = ref({
  oldPassword: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 3, max: 16, message: '密码长度必须为3~16位', trigger: 'blur'}
  ],
  newPassword: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 3, max: 16, message: '密码长度必须为3~16位', trigger: 'blur'}
  ],
  reNewPassword: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {validator: rePasswordValid, trigger: 'blur' }
  ]
})

const resetPassword = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      userApi.resetPassword(userPasswordDTO.value).then(result => {
        if (result.code === 0) {
          ElMessage.success(result.msg)
          dialogResetPasswordDialog.value = false
          tokenStore.removeToken();
          userInfoStore.removeUserInfo();
          // 跳转到登录
          router.push('/login')
        } else {
          ElMessage.error(result.msg)
        }
      })
    } else {
      ElMessage.error('表单验证失败');
    }
  })
}


const dialogFormVisible = ref(false)
const user = ref({})
const handleCommand = (command) => {
  //判断指令
  if (command === 'logout') {
    //退出登录
    tokenStore.removeToken()
    //跳转到登录界面
    router.push('/login')
  } else if (command === 'info'){
    dialogFormVisible.value = true
    //user.value = userInfoStore.user
    Object.assign(user.value, userInfoStore.user)
  } else if (command === 'resetPassword'){
    dialogResetPasswordDialog.value = true
    userPasswordDTO.value = {}
    resetForm.value.resetFields()
  }
}

//图片上传
const handleAvatarSuccess = (result) => {
  user.value.avatar = result.data
}

const headers = ref({
  //携带token传递到后端
  Authorization: tokenStore.token
});

const updateUserInfo = () => {
  userApi.update(user.value).then(result => {
    if (result.code == 0) {
      ElMessage.success(result.msg)
      dialogFormVisible.value = false
      getUserInfo()
    } else {
      ElMessage.error(result.msg)
    }
  })
}

</script>}


<template>
  <!-- element-plus中的容器 -->
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <!-- element-plus的菜单标签 -->
      <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff" router>
        <!-- 动态生成菜单 -->
        <template v-for="(menu, index) in menuData" :index="index.toString()">
          <el-sub-menu v-if="menu.children?.length>0 && menu.type!=1" :index="menu.name">
            <template #title>
              <component
                  class="icons"
                  :is="menu.icon"
                  style="width: 1em; height: 1em; margin-right: 8px" >
              </component>
              <span>{{ menu.name }}</span>
            </template>
            <el-menu-item v-for="(child, ind) in menu.children" :index="child.path">
              <el-icon><component :is="child.icon"></component></el-icon>
              <span>{{ child.name }}</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else :index="menu.path">
            <el-icon><component :is="menu.icon"></component></el-icon>
            <span>{{ menu.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <!-- 右侧主区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <div class="marquee-container">
          <div class="marquee-text">
            欢迎使用健身房预约管理系统,本系统可实现预约管理，数据统计，角色增改等多个功能，感谢您的使用！
          </div>
        </div>
        <!-- 下拉菜单 -->
        <!-- command: 条目被点击后会触发,在事件函数上可以声明一个参数,接收条目对应的指令 -->
        <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="userInfoStore.user.avatar?userInfoStore.user.avatar:avatar"/>
                        <el-icon>
                            <CaretBottom/>
                        </el-icon>
                    </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
              <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
              <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <!-- 中间区域 -->
      <el-main class="main-content">
        <router-view></router-view>
      </el-main>
      <!-- 底部区域 -->

    </el-container>
  </el-container>

  <el-dialog v-model="dialogFormVisible" :title="title" width="500" :lock-scroll="false">
    <el-form :model="user">
      <el-form-item label="名字" :label-width="60">
        <el-input v-model="user.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" :label-width="60">
        <el-input v-model="user.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号" :label-width="60">
        <el-input v-model="user.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="照片" :label-width="60">
        <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :headers="headers"
        >
          <img v-if="user.avatar" :src="user.avatar" class="avatar"/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUserInfo">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog  v-model="dialogResetPasswordDialog" title="重置密码" width="500" :lock-scroll="false">
    <el-form ref="resetForm" :rules="rules" :model="userPasswordDTO">
      <el-form-item prop="oldPassword" label="原密码" :label-width="100">
        <el-input v-model="userPasswordDTO.oldPassword" autocomplete="off"/>
      </el-form-item>
      <el-form-item prop="newPassword" label="新密码" :label-width="100">
        <el-input v-model="userPasswordDTO.newPassword" autocomplete="off"/>
      </el-form-item>
      <el-form-item prop="reNewPassword" label="重复新密码" :label-width="100">
        <el-input v-model="userPasswordDTO.reNewPassword" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogResetPasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="resetPassword(resetForm)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;

  .el-aside {
    background-color: #232323;

    &__logo {
      height: 120px;
      background: url('@/assets/664.jpg') no-repeat center / 220px auto;
    }

    .el-menu {
      border-right: none;
    }
  }

  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}

.main-content {
  background: url('@/assets/bj.jpg') no-repeat center center; /* 居中 */
  background-size: cover; /* 填充整个主体，不拉伸比例 */
  background-attachment: fixed; /* 可选，滚动时固定 */
}

.marquee-container {
  flex: 1; /* 占据剩余空间 */
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 40px; /* 高度可调 */
}

.marquee-text {
  display: inline-block;
  padding-left: 100%; /* 初始位置在右边看不见 */
  animation: marquee 15s linear infinite; /* 动画：15秒滚动一轮，可调 */
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}




</style>